<template>
    <el-main>
        <el-row>
            <el-col :span="3">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" class="button" @click="showDialog('申请资产')">申请资产</el-button>
                </div>
            </el-col>
            <el-col :span=8>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span=3 :offset="1">
                <el-button icon="el-icon-search" circle @click='handleSearch()'></el-button>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" class="button" @click='exportExcel()'>导出</el-button>
                </div>
            </el-col>
        </el-row>

        <!-- 用户信息列表 -->
        <el-table @row-click="clickRow" id="out-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
            v-loading="loading" border>
            <el-table-column prop="id" label="单据号" width="100">
            </el-table-column>
            <el-table-column prop="serialNumber" label="流水号" width="100">
            </el-table-column>
            <el-table-column prop="assetType" label="资产类型" width="50">
            </el-table-column>
            <el-table-column prop="assetTag" label="资产名" width="150">
            </el-table-column>
            <el-table-column prop="applicant" label="申请人">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请日期" width="180">
            </el-table-column>
            <el-table-column prop="returnTime" label="归还日期 " width="180">
            </el-table-column>
            <el-table-column prop="applyState" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope" v-if="canOperation(scope.row.applyState)">
                    <el-button @click="showDialog('报修')" type="danger" size="mini">报修</el-button>
                    <el-button @click="showDialog('归还')" type="primary" size="mini">归还</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.current_page"
            :page-sizes="paginations.page_sizess" :page-size="paginations.page_size" :layout="paginations.layout"
            :total="tableData.length">
        </el-pagination>



        <!-- 报修弹出框 -->
        <el-dialog title="设备报修" :visible.sync="dia_repairVisitable" width="30%">
            <span>你是否要报修该设备</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dia_repairVisitable = false">取 消</el-button>
                <el-button type="primary" @click="repair()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 归还弹出框 -->
        <el-dialog title="归还设备" :visible.sync="dia_reclaimVisitable" width="30%">
            <span>你是否要归还该设备</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dia_reclaimVisitable = false">取 消</el-button>
                <el-button type="primary" @click="reclaim()">确 定</el-button>
            </span>
        </el-dialog>



        <!-- 编辑弹出框
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="rowData" :rules="rules">
                <el-form-item label="流水号" :label-width="formLabelWidth" prop="serialNumber">
                    <el-input v-model="rowData.serialNumber"  readonly=""></el-input>
                </el-form-item>
                <el-form-item label="资产类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="rowData.type" placeholder="请选择资产类型" @change="changeType">
                        <el-option label="设备" value="1"></el-option>
                        <el-option label="汽车" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产名" :label-width="formLabelWidth" prop="tag">
                    <el-select v-model="rowData.tag" placeholder="请选择资产">
                        <el-option v-for="item in assetTags" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditOne('id')">确 定</el-button>
            </div>
        </el-dialog> -->

        <!-- 申请资产对话框 -->
        <el-dialog title="申请资产" :visible.sync="dia_accessVisitable" ref="accessForm">
            <el-form :model="accessData" :rules="rules">
                <el-form-item label="资产类型" :label-width="formLabelWidth" prop="assetType">
                    <el-select v-model="accessData.assetType" placeholder="请选择资产类型" @change="changeType">
                        <el-option label="设备" value="设备"></el-option>
                        <el-option label="汽车" value="汽车"></el-option>
                        <el-option label="图书" value="图书"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产名" :label-width="formLabelWidth" prop="assetTag">
                    <el-select v-model="accessData.assetTag" placeholder="请选择资产">
                        <el-option v-for="item in assetTags" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请人" :label-width="formLabelWidth" v-if="false" prop="applicant">
                    <el-input v-model="accessData.applicant"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dia_accessVisitable = false">取 消</el-button>
                <el-button type="primary" @click="claim()">申 请</el-button>
            </div>
        </el-dialog>


    </el-main>
</template>

<script>
  import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import axios from 'axios'
    import exportExcel from '@/utils/excel'
export default {
  name: "User",
  data() {
    var validateEmail = (rule, value, callback) => {
      let mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (!value) {
        return callback(new Error("不能为空"));
      }
      if (!mal.test(value)) {
        callback(new Error("请输入正确邮箱"));
      } else {
        callback();
      }
    };
    return {
      multipleSelection: [],
      paginations: {
        total: 0,
        current_page: 1,
        page_sizes: [10, 20, 30, 40],
        page_size: 10,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      userName: "admin",
      tableData: [], //表格数据
      assetTags: [], //资产名数据
      rowData: {}, //行数据
      dialogVisible: false,
      dialogFormVisible: false,
      dia_repairVisitable: false,
      dia_accessVisitable: false,
      dia_reclaimVisitable: false,
      formLabelWidth: "120px",
      loading: false,
      dialogTitle: "",
      input: "",
      accessData: {
        applicant: "",
        assetType: "",
        assetTag: ""
      },
      rules: {
        assetType: [
          {
            required: true,
            message: "先选择资产类型",
            trigger: "change"
          }
        ],
        assetTag: [
          {
            required: true,
            message: "选择资产名",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    changeType(val) {
      axios({
        method: "post",
        url: global.url + "/register/unused",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          type: val
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.assetTags = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    clickRow(row) {
      this.rowData = row;
    },
    showDialog(dialogName) {
        console.info(this.rowData);
      if (dialogName === "申请资产") {
        this.rowData = {};
        this.accessData.applicant = "admin";
        this.dia_accessVisitable = true;
      } else if (dialogName === "归还") {
        this.dia_reclaimVisitable = true;
      } else if (dialogName === "报修") {
        this.dia_repairVisitable = true;
      }
    },
    // 申请
    claim() {
      axios({
        method: "post",
        url: global.url + "/access",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: this.accessData
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "申请成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 归还
    reclaim() {
      axios({
        method: "post",
        url: global.url + "/access/return",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          serialNumber: this.rowData.serialNumber
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "归还成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //报修
    repair() {
      axios({
        method: "post",
        url: global.url+"/repair",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          serialNumber: this.rowData.serialNumber
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "报修成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleRepair(row) {
      this.dia_repairVisitable = true;
    },
    // search
    handleSearch() {
      this.$message("test");
    },
    
    //设置数据
    setData() {
      this.loading = true;
      axios({
        method: "post",
        url: global.url+"/access/applicant",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          applicant: "admin"
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.tableData = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    reloadPage() {
      this.setData();
      this.dia_accessVisitable = false;
      this.dia_reclaimVisitable = false;
      this.dia_repairVisitable = false;
    },
    canOperation(state) {
      if (state === "使用中") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.setData();
  }
};
</script>

<style scoped>
.button {
  margin-bottom: 10px;
}
</style>